<template>
    <div class="container">
        <div class="header">
            <NavBar title="订单详情" left-arrow color="#333333" @click-left="back" @click-right="backHome">
                <template #right>
                <Icon name="wap-home-o" size="20" />
                </template>
            </NavBar>
        </div>
        <div class="main">
            <OrderStatusBar :status="info.status || 1 " :statusTxt='info.status_info'></OrderStatusBar>
            <Steps v-if='info.transport_log && info.transport_log.length > 0' direction="vertical" :active="0" active-color='#5652FF'>
                <Step  v-for='(item,idx) in info.transport_log' :key='idx'>
                    <p>{{ item.name }}</p>
                    <p>{{ item.add_time_content }}</p>
                </Step>
            </Steps>
            <div class="ordedr-card">
                <ExpressCard :info='info'></ExpressCard>
                <!--   -->
            </div>
            <div v-if='info.goods && info.goods.length > 0'>
                <div class="baoguo" v-for='(item,idx) in info.goods' :key='idx'>
                    <div class="title flex align-items flex-start">
                        <div class="cirle"></div>
                        <div class="txt">包裹1</div>
                    </div>
                    <div class="item flex align-items space-between">
                        <div class="s-item">
                            <span class="spa">类型:</span>
                            <span class="spb">{{ item.category_name }}</span>
                        </div>
                        <div class="s-item"></div>
                    </div>
                    <div class="item flex align-items space-between">
                        <div class="s-item">
                            <span class="spa">重量:</span>
                            <span class="spb">{{ item.weight }}Kg</span>
                        </div>
                        <div class="s-item">
                            <span class="spa">体积:</span>
                            <span class="spb">{{ item.volume }}</span>
                        </div>
                    </div>
                    <div class="item flex align-items space-between">
                        <div class="s-item">
                            <span class="spa">保价:</span>
                            <span class="spb">{{ item.insured }}</span>
                        </div>
                        <div class="s-item">
                            <span class="spa">预估费用:</span>
                            <span class="price">￥{{ item.money }}</span>
                        </div>
                    </div>
                    <div class="item flex align-items space-between">
                        <div class="s-item">
                            <span class="spa">开箱费用:</span>
                            <span class="price">￥{{ item.see }}</span>
                        </div>
                        <div class="s-item">
                            <span class="spa">打木架费用:</span>
                            <span class="price">￥{{ item.wood }}</span>
                        </div>
                    </div>
                    <div class="remarks" v-if='item.remarks'>
                        <div class="s-title">备注信息：</div>
                        <div class="values">{{ item.remarks }}</div>
                    </div>
                    <div class="pics" v-if='item.img_list'>
                        <div class="s-title">包裹图片</div>
                        <div class="pic-list flex align-items flex-start flex-wrap">
                            <img  v-for='(v,i) in item.img_list' :key='i' :src="v">
                        </div>
                    </div>
                </div>
            </div>
            <div class="total-price flex align-items space-between">
                <div class="left">订单总价</div>
                <div class="right">¥{{ info.money }}</div>
            </div>
        </div>
        <div class="footer" v-if='info.status == 1 || info.status == 2 || info.status == 4'>
           <div class="btna flex align-items space-between" v-if='info.status == 1'>
               <div class="end-btn fn-ctr" @click='cancleOrder'>取消订单</div>
               <div class="edit-btn fn-ctr" @click='editOrder'>修改订单</div>
           </div>
           <div class="btnb fn-ctr" v-if='info.status == 2' @click='show = true'>去支付</div>
           <div class="btnb fn-ctr" v-if='info.status == 4' @click='orderConfirm'>确认收货</div>
        </div>
        <ActionSheet v-model="show" title="支付方式">
            <div class="content">
                <!-- <div class="pay-item flex align-items space-between" @click='payType = 1'>
                    <img class="img" :src="payWx" alt="" >
                    <div class="txt flex1">微信支付</div>
                    <i class="iconfont" :class="[payType == 1 ? 'iconxuanzhong' : 'iconkongxinyuan']"></i>
                </div> -->
                <div class="pay-item flex align-items space-between" @click='payType = 2'>
                    <img class="img" :src="payBlance" alt="">
                    <div class="txt flex1">余额支付</div>
                    <i class="iconfont" :class="[payType == 2 ? 'iconxuanzhong' : 'iconkongxinyuan']"></i>
                </div>
                <div class="btna fn-ctr" @click='pay'>确定</div>
            </div>
        </ActionSheet>
    </div>
</template>

<script>
import wx from 'weixin-jsapi'
import { NavBar, Icon , Step, Steps , Button , Dialog , ActionSheet  } from "vant";
import OrderStatusBar from '@/components/OrderBar/OrderBar'
import ExpressCard from '@/components/express/expressCard';
import payWx from '@/assets/pay_wx.png';
import payBlance from '@/assets/pay_yue.png';
import { getOrderDtl , cancleOrder , getWxCreatedOrder , confirmOrder }  from '@/model/api';
import { appId } from '@/util'
    export default {
        components:{NavBar, Icon ,OrderStatusBar,Step,Steps,ExpressCard,Button,ActionSheet},
        data(){
            return{
                payWx,payBlance,
                id:"",     // 订单ID
                info:{},   // 订单信息
                show:false,
                payType:2, // 1 微信支付  2余额支付
            }
        },
        methods:{
            async cancleOrder(){
                Dialog.confirm({
                    title: '提示',
                    message: '确定要取消订单吗？',
                }).then( async() => {
                    let { code , msg } = await cancleOrder({id:this.info.id});
                    if(code == 1){
                        this.getInfo();
                    }else{
                        this.$toast({
                            type:"fail",
                            message:msg,
                        })
                    }
                }).catch(() => {})
            },
            async getInfo(){
                let { code , data } = await getOrderDtl({id:this.id});
                if(code == 1){
                    this.info = data;
                    //可以支付订单 创建支付环境
                    if(this.info.status == 2){
                       this.getConfig(['chooseWXPay']);
                    }
                }
            },
            editOrder(){
                this.$router.push({
                    name:"editorder",
                    query:{id:this.id},
                })
            },
            //订单收货
            orderConfirm(){
                Dialog.confirm({
                    title: '提示',
                    message: '确定要收到货了吗？',
                }).then( async() => {
                    let { code , msg } = await confirmOrder({id:this.info.id});
                    if(code == 1){
                        this.getInfo();
                    }else{
                        this.$toast({
                            type:"fail",
                            message:msg,
                        })
                    }
                }).catch(() => {})
            },
            pay(){
                if(this.payType == 1){
                    getWxCreatedOrder({id:this.id}).then( res => {
                        if(res.code == 1){
                            wx.ready(function(){
                                wx.chooseWXPay({
                                    appId:res.data.appId,
                                    timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                    nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 
                                    package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                    signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: res.data.paySign, // 支付签名
                                    success: function (res) {
                                        Dialog.alert({
                                            title: '提示',
                                            message: '付款成功',
                                        }).then( async() => {
                                            //跳转到支付成功页面有这个页面
                                            this.$router.push({
                                                path: "/taborder",
                                            })
                                        })
                                    },
                                    cancel: function (res) {
                                        this.$toast('已取消支付');
                                    },
                                    fail: function (res) {
                                        this.$toast('支付失败，请重试');
                                    }
                                })
                            })
                        }
                    })
                }else{
                    this.$router.push({name:"editpaypwd",query:{mode:2,id:this.id}})
                }
            },
        },
        async created(){
            let { id } = this.$route.query;
            this.id = id;
            this.getInfo();
        },
    }
</script>

<style lang="less" scoped>
.main{
    padding-bottom: 70px;
}
.total-price{
     width: 347px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 15px 10px;
    margin:0 auto 5px; 
    .left{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
    }
    .right{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FF5522;
    }
}
.content{
    .pay-item{
        width: 100%;
        height: auto;
        padding: 15px 14px;
        img{
            width: 13px;
            height:auto;
        }
        .txt{
            padding: 0 7px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }
        .iconkongxinyuan{
            font-size: 16px;
            color: #ccc;
        }
        .iconxuanzhong{
            font-size: 16px;
            color: #5652FF;
        }
    }
    .btna{
        width: 347px;
        height: 41px;
        background: #5652FF;
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        margin: 10px auto;
    }
}


    .ordedr-card{
        width: 100%;
        padding: 14px;
        margin-top: 10px;
    }
    .baoguo{
        width: 347px;
        height: auto;
        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        border-radius: 5px;
        padding: 0 10px;
        margin:0 auto 5px; 
        .title{
            padding: 15px 0;
            .cirle{
                width: 6px;
                height: 6px;
                background: #5652FF;
                border-radius: 50%;
                margin-right: 5px;
            }
            .txt{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
        .item{
            width: 100%;
            margin-bottom: 12px;
            .s-item{
                width: 50%;
                .spa{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-right: 5px;
                }
                .spb{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .price{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FF5522;
                }
            }
        }
        .remarks{
            padding: 12px 0;
            border-top: 1px solid #EEEEEE;
            .s-title{
                width: 100%;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-bottom: 5px;
            }
            .values{
                width: 100%;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 18px;
            }
        }
        .pics{
            padding: 12px 0;
            border-top: 1px solid #EEEEEE;
            .s-title{
                width: 100%;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-bottom: 5px;
            }
            .pic-list{
                width: 100%;
                img{
                    width: 90px;
                    height:90px;
                    margin: 0 5px;
                }
            }
        }
    }
    .footer{
        width:100%;
        height: auto;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 10px 14px;
        .btna{
            .end-btn{
                width: 165px;
                height: 41px;
                border: 1px solid #5652FF;
                border-radius: 5px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #5652FF;
            }
            .edit-btn{
                width: 165px;
                height: 41px;
                background: #5652FF;
                border-radius: 5px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        .btnb{
            width: 347px;
            height: 41px;
            background: #5652FF;
            border-radius: 5px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
</style>